<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div style="margin: auto; width: 800px">
<form class="layui-form layui-form-pane" action="/personal/personInfoChange" method="post" enctype="multipart/form-data">
    <fieldset class="layui-elem-field" style="margin: 20px;padding-left: 20px;">
    <legend>个人资料</legend>
    <a title="点击此处，修改图片" href="javascript:void(0);" id="imgs" style="float: left;margin-left: 450px;margin-bottom: -200px;">
        <div  id ="pic" >
            <img th:src="@{'/image/headers/'+${staff.picture}}" style="width: 80px;height: 80px;border-radius: 40px;">
        </div>
        <div style="text-align: center;">修改头像</div>
    </a>

    <input  name ="pictures" type="file" id="file" style="display: none" accept=".jpg,.png,.gif,.bmp,.jpeg,.webp"/>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input th:value="${staff.email}" type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
                <input th:value="${staff.phone}" type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">银行卡</label>
            <div class="layui-input-inline">
                <input th:value="${staff.bankCard}" type="text" name="bankCard" autocomplete="off"  class="layui-input" lay-verify="required|bankCard">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input th:value="${staff.address}" type="text" name="bankCard" autocomplete="off"  class="layui-input" lay-verify="required">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">政治面貌</label>
            <div class="layui-input-inline">
                <select th:value="${staff.politicalOutlook}" name="politicalOutlook" lay-filter="aihao">
                    <option value="0">群众</option>
                    <option value="1" >团员</option>
                    <option value="2" >党员</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">婚姻</label>
            <div class="layui-input-inline">
                <select th:value="${staff.maritalStatus}" name="maritalStatus" lay-filter="aihao">
                    <option value="0">未婚</option>
                    <option value="1" >已婚</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px;margin-left: -10px;">紧急联系人：</label>
            <div class="layui-input-inline">
                <input type="tel" th:value="${staff.emergencyContact1}" name="emergencyContact1" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话：</label>
            <div class="layui-input-inline">
                <input type="text" th:value="${staff.emergencyContact1Phone}" name="emergencyContact1Phone"  autocomplete="off" class="layui-input" lay-verify="required|phone">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"style="width: 120px;margin-left: -10px;">紧急联系人：</label>
            <div class="layui-input-inline">
                <input type="tel" th:value="${staff.emergencyContact2}"  name="emergencyContact2"  autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话：</label>
            <div class="layui-input-inline">
                <input type="text" th:value="${staff.emergencyContact2Phone}" name="emergencyContact2Phone" autocomplete="off" class="layui-input" lay-verify="required|phone">
            </div>
        </div>
    </div>

    <div class="layui-form-item" >
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            <button type="button" class="layui-btn" id="changepass">修改密码</button>
        </div>
    </div>
    </fieldset>
</form>
</div>
</body>

<script th:inline="javascript">
    layui.use(['form', 'layedit', 'laydate','jquery'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,$=layui.jquery;


        //自定义验证规则
        form.verify({
            bankCard: [
            /^[0-9]{16,19}$/
            ,'密码必须16到19位数字，且不能出现空格'
        ]
        });




        //表单赋值
       $( function(){
            form.val('example', {
                "maritalStatus": [[${staff.maritalStatus}]] // "name": "value"
                ,"politicalOutlook": [[${staff.politicalOutlook}]]
            });
        });

       //更换头像 和 重置
        $(function () {

            $("#reset").click(function () {

                if($("#file").val()!=""){
                    var img =$("<img style='width: 80px;height: 80px;border-radius: 40px;' src=/image/headers/"+[[${staff.picture}]]+">");
                    $("#pic").children().remove()
                    $("#pic").append(img)
                }
            })


            $("#imgs").click(function () {
                $("#file").click();
                $("#file").change(function(){
                    var objUrl = getObjectURL(this.files[0]) ;

                    var img =$("<img style='width: 80px;height: 80px;border-radius: 40px;' src="+objUrl+">");
                    $("#pic").html("")
                    $("#pic").append(img)
                })
            })

            if([[${param.msg}]]==1){
                alert("上传头像格式有误")
                window.location.href="/personal/personInfoDetail";
            }
            if([[${param.msg}]]==0){
                alert("修改成功")
                window.location.href="/personal/personInfoDetail";
            }

            $("#changepass").click(function () {
                layer.prompt({
                    formType: 1,
                    title: '请输入原密码',
                    area: ['150px', '20px'] //自定义文本域宽高
                }, function(value, index, elem){

                    if(value==[[${session.user.password}]]){
                        layer.prompt({
                            formType: 1,
                            title: '请输入新密码',
                            area: ['150px', '20px'] //自定义文本域宽高
                        }, function(value, index, elem){

                            var v1 =value;

                            var tests=/^.{6,16}$/;
                            var flag = tests.test(value)
                            if(flag){
                                layer.prompt({
                                    formType: 1,
                                    title: '请确认新密码',
                                    area: ['150px', '20px'] //自定义文本域宽高
                                }, function(value, index, elem){
                                    if(v1==value){
                                        $.ajax({
                                            url: "/personal/changepass",
                                            data: {value:value},
                                            success: function () {
                                                alert("修改成功")
                                                window.location.href="/logout"
                                            }
                                        })
                                    }else{
                                        alert("两次密码不一致")
                                        layer.close(index)
                                    }

                                });
                            }else {
                                alert("不符合密码规则")
                            }
                        });

                    }else{
                        alert("密码有误")
                    }

                    layer.close(index);
                });

            })
        })


        //上传图片预览
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined)
            { // basic
                url = window.createObjectURL(file) ;
            }
            else if (window.URL!=undefined)
            {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            }
            else if (window.webkitURL!=undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    });
</script>

</html>